import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import Example from '../../../examples/enable-detail-panel';
import AlternateExample from '../../../examples/alternate-detail-panel';

<Head>
  <title>
    {'Detail Panel Expanding Feature Guide - Mantine React Table Docs'}
  </title>
  <meta
    name="description"
    content="How to add expanding detail panels to each row in Mantine React Table"
  />
</Head>

## Detail Panel (Expanding) Feature Guide

Mantine React Table has multiple kinds of expanding features. This guide will show you how to use the detail panel feature to expand a single row to show more information for that row.

If you are looking for how to expand multiple rows from a tree data structure, see the [Expanding Sub-Rows](/docs/guides/expanding-sub-rows) guide.

### Relevant Table Options

<TableOptionsTable
  onlyOptions={
    new Set([
      'displayColumnDefOptions',
      'positionExpandColumn',
      'renderDetailPanel',
    ])
  }
/>

### Relevant State

<StateOptionsTable onlyOptions={new Set(['expanded'])} />

### Render Detail Panel

To add a detail panel to a row, all you need to do is add a `renderDetailPanel` table option.

The recommended way to access the row data for the detail panel is to pull from the `original` object on a row. This gives you the original data for the row, not transformed or filtered by TanStack Table.

> Using `row.getValue('columnId')` will not work for data that does not have its own column. Using `row.original.columnId` is recommended for detail panels since the data in the detail panel usually does not have its own column.

<Example />

### Expand Detail Panel By Default

If you want some or all rows to be expanded by default, you can specify that in the `initialState.expanded` table option. Pass `true` to expand all rows, or specify which rowIds should be expanded.

```jsx
//expand first 2 rows by default
const table = useMantineReactTable({
  data,
  columns,
  initialState: {
    expanded: {
      1: true,
      2: true,
    },
  },
});
```

```jsx
//expand all rows by default
const table = useMantineReactTable({
  data,
  columns,
  initialState: {
    expanded: true,
  },
});
```

### Position Expand Column Last

If you want to position the expand column last, you can set the `positionExpandColumn` table option to `'last'`.

<AlternateExample />

View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/features-detail-panel-examples-)**
